<template>
  <div>
    <el-container>
      <el-header>
        <span>考研资料分享系统</span>
      </el-header>
      <el-main>
        <div>
          <el-row>
            <el-col :span="3">
                <el-button round @click="comName='UserInfo'"><i class="el-icon-user-solid"></i>用户信息管理</el-button>
            </el-col>
            <el-col :span="3">
                <el-button round @click="comName='FileManagement'"><i class="el-icon-folder-opened"></i>文件管理</el-button>
            </el-col>
          </el-row>
          <div style='background-color:#f1f1f1'>
            <div :class="comName=='AddUser'||'Data'?'editstyle':''">
              <component :is="comName" @editPage="editPage" @addPage="addPage"></component>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo'
import FileManagement from '@/components/FileManagement'
import AddUser from '@/components/AddUser'
import Data from '@/components/Data'

export default {
    components:{
        UserInfo,
        FileManagement,
        AddUser,
        Data
    },
    data(){
        return {
            comName:"UserInfo"
        }
    },
    methods:{
      addPage(){
        this.comName='AddUser'
      },
      editPage(data){
        this.comName='Data'
        this.$store.commit("useid",data)
      }

    }
};
</script>

<style>
.el-header {
  background-color: #1e477e;
  color: #fff;
  line-height: 60px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.editstyle{
  padding:30px 0;

}
</style>